<html>
<head>
    <title>用电参数</title>
    <link rel="stylesheet" href="../../../assets/bundle.element.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body{
            background: #F2F2F2;
        }


        .main-head{
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer{
            height: 200px;
        }




    </style>
</head>
<body>
<div class="page" id="page-elesafe">

    <div class="page-title">报表管理 › 用电安全统计</div>
    <div class="page-main">
        <el-row>
            <el-col :span="4">
                <dev-tree v-on:click-node="aa" :tabsign="'z'" ></dev-tree>
            </el-col>
            <el-col :span="20">
                <div class="main-head">
                    <el-form :inline="true">
                        <el-form-item label="">
                            <el-date-picker type="month" v-model="day" placeholder="日期" style="width: 150px;"></el-date-picker>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="search" style="background: #578BBB">查询</el-button>
                            <el-button type="primary" @click="exportBtn" style="background: #56B1B9">导出</el-button>
                        </el-form-item>
                    </el-form>
                </div>

                <el-table border stripe style="width: 100%" :data="eleSafeData">
                    <el-table-column prop="name" label="测量点" align="center">
                    </el-table-column>
                    <el-table-column  label="用电概览" align="center">
                        <el-table-column label="本月"  prop="value" align="center">

                        </el-table-column>
                        <el-table-column label="上月"  prop="value" align="center">

                        </el-table-column>
                        <el-table-column label="变化值"  prop="value" align="center">

                        </el-table-column>
                        <el-table-column label="变化率"  prop="value" align="center">

                        </el-table-column>
                    </el-table-column>
                    <el-table-column  label="基本指标异常情况" align="center">
                        <el-table-column label="负荷"  prop="value" align="center">

                        </el-table-column>
                        <el-table-column label="电流"  prop="value" align="center">

                        </el-table-column>
                        <el-table-column label="电压"  prop="value" align="center">

                        </el-table-column>
                        <el-table-column label="温度"  prop="value" align="center">

                        </el-table-column>
                        <el-table-column label="功率因数"  prop="value" align="center">

                        </el-table-column>
                    </el-table-column>
                </el-table>

            </el-col>
        </el-row>
    </div>


</div>


<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage=new Vue({
        el:'#page-elesafe',
        data:{
            day:'',
            eleSafeData:'',
            expandId:'',
        },
        methods:{
            search:function(){
                alert('查询按钮');
            },
            aa:function(data){
            },
            exportBtn:function(){
                alert('导出按钮');
            },
        },
        created:function(){

            this.day = TimeUtil.convertToString(new Date()).substr(0,10);

        },
        mounted:function(){
            this.eleSafeData=[{
                name:'1变压器',
                value:50,
            },];
        }
    });


</script>

</body>
</html>
